{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">logmnr日志挖掘</h3>
        <form name="Form" role="search" action="/oratk_app/oratk_most_plan_ajax" onsubmit="return validateForm()"
              target="_blank" method="POST">
            <div class="navbar-form navbar-left">
                <div>
                    <label>请选择实例名：</label><span style="color:red;">(必选)&nbsp</span>
                    <select class="selectpicker show-tick " style="width:300px;" data-live-search="true"
                            name="conn_string"
                            id="conn_string">

                        <option id="def">--请选择实例名--</option>
                        {% for i in instanceinfo_result %}
                            <option id="a">{{ i.dbname }}={{ i.conn_string }}</option>
                        {% endfor %}
                    </select>
                    &nbsp&nbsp
                    <label>请选择时间段：</label><span style="color:red;">(必选)&nbsp</span>
                    <input type="text" id="run_date_range" readonly=""
                           placeholder="请选择可执行时间范围"
                           style="width:300px; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"
                           class="form-control ">
                </div>
                <span>&nbsp</span>
                <div>
                    <label>会 &nbsp 话：</label>
                    &nbsp&nbsp<input type="text" style="width:300px;" class="form-control" id="session_info"
                                     placeholder="例: 123,123">
                    <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp相关对象：</label>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" style="width:300px;"
                                                                                  class="form-control" id="object_info"
                                                                                  placeholder="所涉及的表名">
                </div>
                <span>&nbsp</span>
                <div>
                    <label>事务号：</label>
                    &nbsp&nbsp<input type="text" style="width:300px;" class="form-control" id="tran_info"
                                     placeholder="事务号">
                </div>


                <div><span>&nbsp</span></div>
                <div class="col-sm-10">
                    {#                <div class="form-group">#}
                    <div style="text-align:center;vertical-align:middle;">
                        <input type="button" style="text-align:center;" class="btn btn-primary" id="btSelect" value="提交">
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">logmnr日志挖掘记录</h3>
        <div class="table-responsive" id="table_pagination">
            {% include 'basic_app/search_ajax.html' %}
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>执行时间</th>
                    <th>数据库</th>
                    <th>连接串</th>
                    <th>挖掘时间段</th>
                    <th>实例化条件</th>
                    <th>实例化表名</th>
                    <th>条目数</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody id="logmnr_tab">
                {#                {%   for i in userinfo_result %}#}
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.rec_date }}</td>
                        <td>{{ i.db_name }}</td>
                        <td>{{ i.db_conn }}</td>
                        <td>{{ i.run_date_range }}</td>
                        <td>{{ i.run_condition }}</td>
                        <td>{{ i.run_table }}</td>
                        <td>{{ i.table_count }}</td>
                        <td><span  data-toggle="tooltip"  data-placement="bottom" title="{{ i.msg_err }}">{{ i.status }}</span></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#        以下是分页#}
            {% include 'basic_app/paginator_common_ajax.html' %}
            {#        以上是分页#}
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 1200px;" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" onsubmit="return validateForm()">挖掘环境确认</h4>
                </div>
                <span>&nbsp</span>
                <div id="tab_detail"></div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}

{% block script %}
    <script>
        //当点击"查询(本页展示)时，输入框值检查及ajax异步调用"
        $('#btSelect').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return;
            }
            var run_date_range = $('#run_date_range').val();
            if (run_date_range == '') {
                alert('请选择时间')
                return;
            }

            $.ajax({
                type: "POST",
                data: {
                    'conn_string': $('#conn_string').val(),
                    'run_date_range': $('#run_date_range').val(),
                    'session_info': $('#session_info').val(),
                    'object_info': $('#object_info').val(),
                    'tran_info': $('#tran_info').val(),
                },
                url: "/oratk_app/oratk_most_logmnr_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#tab_detail").html(result);
                    //如果没有开启附件日志，禁止提交
                    var supplemental_log_val = $("#supplemental_log").text();
                    if (supplemental_log_val == 'NO') {
                        $("#supplemental_log").css('color', 'red')

                        //置灰不可点击
                        {#$('#logmnr_exec_id').prop('disabled', true)#}
                        $('#logmnr_exec_id').attr("title", "未开启附加日志")
                        {#$("#logmnr_exec_id").attr("disabled", true);#}
                        $('[data-toggle="tooltip"]').tooltip();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            })
            //调用模态框
            $('#myModal').modal('show')
        })

    </script>

    <script>
        $("#run_date_range").daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            autoApply: true,
            autoUpdateInput: false,
            opens: "right",
            drops: "down",
            maxDate: moment().startOf('seconds'),
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('seconds'),
            locale: {
                "applyLabel": "确定",
                "cancelLabel": "清空",
                "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
                "monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                "firstDay": 1
            },
        }).on('apply.daterangepicker', function (ev, picker) {
            $(this).css("color", "#333");
            $("#run_date_start").val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
            $("#run_date_end").val(picker.endDate.format('YYYY-MM-DD HH:mm'));
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' / ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
        }).on('cancel.daterangepicker', function (ev, picker) {
            $(this).css("color", "#999");
            $(this).val('请选择可执行时间范围');
        });

    </script>
    <script>
        function logmnr_exec() {
            var supplemental_log_val = $("#supplemental_log").text();
            if (supplemental_log_val == 'NO') {
                alert("未开启附加日志");
                return;
            }
            var url = '/oratk_app/oratk_most_logmnr_ajax_submit';
            $.ajax({
                type: "POST",
                data: {
                    'logmnr_exec_status':'YES',
                    'conn_string': $('#conn_string').val(),
                    'run_date_range': $('#run_date_range').val(),
                    'session_info': $('#session_info').val(),
                    'object_info': $('#object_info').val(),
                    'tran_info': $('#tran_info').val(),
                },
                url: "/oratk_app/oratk_most_logmnr_ajax_submit", //后台处理函数的url
                cache: false,
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#logmnr_exec_id').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#logmnr_exec_id').button('reset')
                },
                success: function (result) {
                    $('#myModal').modal('hide');
                     $("#table_pagination").html(result)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            })
        }

        $('#logmnr_exec_id').click(function () {
            showLoading(); // 显示等待图标
            $.when(logmnr_exec()).done(function (data) {
                closeLoading(); // 隐藏等待图标
            });
        });


        function ShowDiv() {
            $("#loading").show();
        }


        $(document).ready(function () {
            $('#logmnr_tab tr').each(function (i) {
                $(this).children('td').each(function (j) {
                    if (j == 8) {
                        console.log($(this).text())
                        if ($(this).text() == 'fail') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'success') {
                            $(this).css('color', 'green')
                        }
                    }
                });
            })
        })


    </script>

{% endblock %}